<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>图书列表</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.css"/>
    <link rel="stylesheet" href="../assets/css/sweetalert2.min.css"/>
    <script src="http://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../assets/js/sweetalert2.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <h1 class="page-header" v-html="title"></h1>
    <div class="row">
        <!--弹出模态框-->

        <div class="col-md-offset-9 col-md-1">
            <button class="btn btn-primary" data-toggle="modal" data-target=".insert">添加书籍</button>
        </div>
        <div class="col-md-2">
            <a href="logout" class="btn btn-danger">退出登陆</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <a class="btn btn-lg btn-warning">图书信息</a>
            </div>
            <div class="row" style="margin-top: 2px;">
                <a href="orders" class="btn btn-lg btn-default">订单信息</a>
            </div>
            <div class="row" style="margin-top: 2px;">
                <a href="download" class="btn btn-lg btn-default">导出订单</a>
            </div>
        </div>
        <div class="col-md-10 center-block">
            <table class="table table-striped table-hover" id="table">
                <tr>
                    <th>ID</th>
                    <th>书籍名称</th>
                    <th>书籍种类</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>出版时间</th>
                    <th>价格</th>
                    <th>优惠价</th>
                    <th>ISBN索引号</th>
                    <th>描述(部分)</th>
                    <th>封面</th>
                    <th>操作</th>
                </tr>

                <!--<tr>-->
                <!--<td>id</td>-->
                <!--<td>name</td>-->
                <!--<td>profession</td>-->
                <!--<td>province</td>-->
                <!--<td>uptime</td>-->
                <!--<td>funds</td>-->
                <!--<td>corporation</td>-->
                <!--<td>-->
                <!--<a href="linkman?customerid=1" data-toggle="tooltip" data-placement="top" title="查看联系人"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>-->
                <!--<a href="#" data-toggle="modal" data-target=".change"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>-->
                <!--<a href="#" data-toggle="tooltip" data-placement="top" title="删除客户"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>-->
                <!--</td>-->
                <!--</tr>-->

            </table>
        </div>
    </div>
</div>


<!-- 模态框 -->
<!-- 修改 -->
<div class="modal fade change" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改书籍信息</h4>
            </div>

            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">书籍名称</label>
                            <input type="text" class="form-control" name="bookname" id="ch_bookname" placeholder="书名"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">书籍种类</label>
                            <input type="text" class="form-control" name="typeid" id="ch_typeid" placeholder="书种类"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">作者</label>
                            <input type="text" class="form-control" name="author" id="ch_author"
                                   placeholder="行业"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">出版社</label>
                            <input type="text" class="form-control" name="publisher" id="ch_publisher"
                                   placeholder="出版社"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">出版时间</label>
                            <input type="date" class="form-control" name="time" id="ch_time" placeholder="出版时间"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">价格</label>
                            <input type="text" class="form-control" name="price" id="ch_price" placeholder="价格"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">优惠价</label>
                            <input type="text" class="form-control" name="offprice" id="ch_offprice"
                                   placeholder="优惠价"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">ISBN索引</label>
                            <input type="text" class="form-control" name="isbn" id="ch_isbn"
                                   placeholder="ISBN索引"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">描述</label>
                            <input type="text" class="form-control" name="description" id="ch_description"
                                   placeholder="描述"/>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="change_submit">修改</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加 -->
<div class="modal fade insert" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">添加客户信息</h4>
            </div>

            <div class="modal-body">

                <div class="row">
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">书籍名称</label>
                            <input type="text" class="form-control" name="bookname" id="insert_bookname"
                                   placeholder="书名"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">书籍种类</label>
                            <input type="text" class="form-control" name="typeid" id="insert_typeid" placeholder="书种类"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">作者</label>
                            <input type="text" class="form-control" name="author" id="insert_author"
                                   placeholder="行业"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">出版社</label>
                            <input type="text" class="form-control" name="publisher" id="insert_publisher"
                                   placeholder="出版社"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">出版时间</label>
                            <input type="date" class="form-control" name="time" id="insert_time" placeholder="出版时间"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">价格</label>
                            <input type="text" class="form-control" name="price" id="insert_price" placeholder="价格"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">优惠价</label>
                            <input type="text" class="form-control" name="offprice" id="insert_offprice"
                                   placeholder="优惠价"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">ISBN索引</label>
                            <input type="text" class="form-control" name="isbn" id="insert_isbn"
                                   placeholder="ISBN索引"/>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <label for="name">描述</label>
                            <input type="text" class="form-control" name="description" id="insert_description"
                                   placeholder="描述"/>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="insert_submit">添加</button>
            </div>
        </div>
    </div>
</div>

</body>
<script th:inline="javascript">
    $("[data-toggle='tooltip']").tooltip();
    var app = new Vue({
        el: '#app',
        data: {
            title: '图书列表'
        }
    })

    //获取所有客户
    $.post("post/getbooks", function (data) {
        objs = JSON.parse(data.data);
        console.error(objs);
        for (var i in objs) {
            //时间戳转为时间格式
            var date = new Date(objs[i].publishTime).toLocaleDateString();
//            var date = new Date(objs[i].publishTime).format("yyyy-MM-dd ");
            $("#table").append(
                '<tr id="tr' + objs[i].id + '">\n' +
                '                    <td id="id' + objs[i].id + '">' + objs[i].id + '</td>\n' +
                '                    <td id="bookname' + objs[i].id + '">' + objs[i].bookname + '</td>\n' +
                '                    <td id="typeid' + objs[i].id + '">' + objs[i].typeID + '</td>\n' +
                '                    <td id="author' + objs[i].id + '">' + objs[i].author + '</td>\n' +
                '                    <td id="publisher' + objs[i].id + '">' + objs[i].publisher + '</td>\n' +
                '                    <td id="publish_time' + objs[i].id + '">' + date + '</td>\n' +
                '                    <td id="price' + objs[i].id + '">' + objs[i].price + '</td>\n' +
                '                    <td id="priceoff' + objs[i].id + '">' + objs[i].priceoff + '</td>\n' +
                '                    <td id="ISBN' + objs[i].id + '">' + objs[i].isbn + '</td>\n' +
                '                    <td id="description' + objs[i].id + '">' + objs[i].description.substring(0, 20) + '</td>\n' +
                '                    <td id="img' + objs[i].id + '"><img style="width: 40px;" src="../' + objs[i].img + '"/></td>\n' +
                '                    <td>\n' +
                '                        <a href="#" onclick="changeCustomer(this)" data-toggle="modal" data-target=".change"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>\n' +
                '                        <a id="' + objs[i].id + '" href="#" onclick="deleteCustomer(this)" data-toggle="tooltip" data-placement="top" title="删除客户"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>\n' +
                '                    </td>\n' +
                '                </tr>'
            );
        }
    }, "json");


    //删除客户
    function deleteCustomer(self) {
        var id = $(self).attr("id");
        $.post("post/deletebook", {bookid: id}, function (data) {
            //删除元素
            if (data.code == 200) {
                $("#tr" + id).hide(300);
            }
            // 显示返回状态信息
            sweetAlert("", data.data, data.message);
        }, "json");
    };


    //添加客户
    $("#insert_submit").click(function () {
        var bookname = $("#insert_bookname").val();
        var typeid = parseInt($("#insert_typeid").val());
        var author = $("#insert_author").val();
        var publisher = $("#insert_publisher").val();
        var localtime = $("#insert_time").val();
        var time = Date.parse(new Date($("#insert_time").val()));
        var price = $("#insert_price").val();
        var priceoff = $("#insert_offprice").val();
        var isbn = $("#insert_isbn").val();
        var description = $("#insert_description").val();
//        var img = $("#insert_img").val();
        var img = "assets/images/book-covers/05.jpg";
        $.post("post/insertbook", {
            typeID: typeid, bookname: bookname, author: author,
            publisher: publisher, pushTime: time, ISBN: isbn, price: price, priceoff: priceoff,
            catalog: " ", description: description, img: img, time:time
        }, function (data) {
            //时间戳转为时间格式
//            var date = new Date(objs[i].uptime).toLocaleDateString();
            if (data.code == 200) {
                $("#table").append(
                    '<tr id="tr' + data.data + '">\n' +
                    '                    <td id="id' + data.data + '">' + data.data + '</td>\n' +
                    '                    <td id="bookname' + data.data + '">' + bookname + '</td>\n' +
                    '                    <td id="typeid' + data.data + '">' + typeid + '</td>\n' +
                    '                    <td id="author' + data.data + '">' + author + '</td>\n' +
                    '                    <td id="publisher' + data.data + '">' + publisher + '</td>\n' +
                    '                    <td id="publish_time' + data.data + '">' + localtime.replace(/-/g,'/') + '</td>\n' +
                    '                    <td id="price' + data.data + '">' + price + '</td>\n' +
                    '                    <td id="priceoff' + data.data + '">' + priceoff + '</td>\n' +
                    '                    <td id="ISBN' + data.data + '">' + isbn + '</td>\n' +
                    '                    <td id="description' + data.data + '">' + description.substring(0, 20) + '</td>\n' +
                    '                    <td id="img' + data.data + '"><img style="width: 40px;" src="../' + img + '"/></td>\n' +
                    '                    <td>\n' +
                    '                        <a href="#" onclick="changeCustomer(this)" data-toggle="modal" data-target=".change"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>\n' +
                    '                        <a id="' + data.data + '" href="#" onclick="deleteCustomer(this)" data-toggle="tooltip" data-placement="top" title="删除客户"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>\n' +
                    '                    </td>\n' +
                    '                </tr>'
                );
                sweetAlert("", "客户添加成功！", data.message);
            } else {
                // 显示返回状态信息
                sweetAlert("", data.data, data.message);
            }

        }, "json");
    });


    //修改客户信息
    var ch_id = 0;

    function changeCustomer(self) {
        ch_id = $(self).next().attr("id");
        $("#ch_bookname").val($("#tr" + ch_id + " #bookname" + ch_id).html());
        $("#ch_typeid").val($("#tr" + ch_id + " #typeid" + ch_id).html());
        $("#ch_author").val($("#tr" + ch_id + " #author" + ch_id).html());
        $("#ch_publisher").val($("#tr" + ch_id + " #publisher" + ch_id).html());
        $("#ch_time").val($("#tr" + ch_id + " #publish_time" + ch_id).html().replace(/\//g,"-"));
        $("#ch_price").val($("#tr" + ch_id + " #price" + ch_id).html());
        $("#ch_offprice").val($("#tr" + ch_id + " #priceoff" + ch_id).html());
        $("#ch_isbn").val($("#tr" + ch_id + " #ISBN" + ch_id).html());
        $("#ch_description").val($("#tr" + ch_id + " #description" + ch_id).html());
    }

    $("#change_submit").click(function () {
        id = ch_id;
        var bookname = $("#ch_bookname").val();
        var typeid = parseInt($("#ch_typeid").val());
        var author = $("#ch_author").val();
        var publisher = $("#ch_publisher").val();
        var localtime = $("#ch_time").val();
        var time = Date.parse(new Date($("#ch_time").val()));
        var price = $("#ch_price").val();
        var priceoff = $("#ch_offprice").val();
        var isbn = $("#ch_isbn").val();
        var description = $("#ch_description").val();
        var img = "assets/images/book-covers/05.jpg";
        $.post("post/updatebook", {
            id: id, typeID: typeid, bookname: bookname, author: author,
            publisher: publisher, pushTime: time, ISBN: isbn, price: price, priceoff: priceoff,
            catalog: " ", description: description, img: img, time:time
        }, function (data) {
            //时间戳转为时间格式
//            var date = new Date(objs[i].uptime).toLocaleDateString();
            if (data.code == 200) {
                //修改表格前端数据
                $("#tr" + id + " #bookname" + id).html(bookname);
                $("#tr" + id + " #typeid" + id).html(typeid);
                $("#tr" + id + " #author" + id).html(author);
                $("#tr" + id + " #publisher" + id).html(publisher);
                $("#tr" + id + " #publish_time" + id).html(localtime.replace(/-/g,'/'));
                $("#tr" + id + " #price" + id).html(price);
                $("#tr" + id + " #priceoff" + id).html(priceoff);
                $("#tr" + id + " #ISBN" + id).html(isbn);
                $("#tr" + id + " #description" + id).html(description);
                $("#tr" + id + " #img" + id).html(img);
            }
            // 显示返回状态信息
            sweetAlert("", data.data, data.message);
        }, "json");
    });


</script>
</html>